<template>
  <el-cascader
    ref="cascaderMallCatergory"
    @change="handleMallCatergoryChange"
    v-model="unitValue"
    :options="productCategoryOptions"
    :props="{ value: 'id', label: 'name' }"
    clearable
    filterable
    :placeholder="placeholder.value"
  />
</template>

<script setup>
import {listProductCategory} from "@/api/pms/productCategory";

const {proxy} = getCurrentInstance();
const productCategoryOptions = ref([]);
const cascaderMallCatergory = ref();

const props = defineProps({
  modelValue: {
    defult: null,
    type: String
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: ''
  }
});


const emit = defineEmits(['update:modelValue']);
const unitValue = toRef(props, 'modelValue');
function handleMallCatergoryChange(value){

  let nodesInfo = cascaderMallCatergory.value.getCheckedNodes();
  console.log(nodesInfo);
  if (value && value.length != 0) {
    // for (const checkedNode of checkedNodes) {
    //   console.log(checkedNode.name, checkedNode.label)
    //   arr.push(checkedNode.name)
    // }
    // let arr = selectOptions.map(option => option.label)

  }
  emit('change', value, nodesInfo[0].pathLabels);
  // emit('update:modelValue', value)
}

listProductCategory().then(response => {
  productCategoryOptions.value = [];
  const data = { id: 0, name: '顶级节点', children: [] };
  data.children = proxy.handleTree(response.data, "id", "parentId");
  productCategoryOptions.value = data.children;
})



</script>

<style scoped>

</style>
